<template>
  <div class="box">
    <!-- 消息 互动 看过我 -->
    <div id="myChart" :style="{ width: '375px', height: '200px' }"></div>
    <jobpage/>
  </div>
</template>

<script>
import jobpage from "@/components/fouth/jobpage.vue"
export default {
  components:{
    jobpage
  },
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["2.18", "2.19", "2.20", "2.21", "2.22", "昨天","今天"],
        },
        yAxis: {
          type: "",
          axisLabel: {
            show: false,
          },
        },
        grid: {
          top: "4%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          data: ["我", "活跃牛人5"],
        },
        series: [
          {
            name: "我",
            data: [230, 200, 170, 140, 200, 177, 240],
            type: "line",
            itemStyle: {
              normal: {
                color: "#f60", //折点颜色
                lineStyle: {
                  color: "#f60", //折线颜色
                },
              },
            },
          },
          {
            name: "活跃牛人5",
            data: [40, 42, 100, 50, 105, 87, 140],
            type: "line",
            itemStyle: {
              normal: {
                color: "#df3b35", //折点颜色
                lineStyle: {
                  color: "#df3b35", //折线颜色
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  background: #f0f0f0;
  overflow: hidden;
  margin-top: 1.20rem;
}
#myChart {
  background: #fff;
  margin-bottom: 0.08rem;
}
</style>